import React, { Component } from "react";
import logo from "@images/svgs/logo.svg";
import "./style.less";
import {
  BrowserRouter as Router,
  Redirect,
  Switch,
  Route,
  withRouter,
} from "react-router-dom";
import Home from "@pages/Home";
import About from "@pages/About";
import QRCode from "@pages/QRCode";
import Settings from "@pages/Settings";
import $ from "jquery";

// 调试工具
const VConsole = require("vconsole");

class App extends Component {
  componentDidMount() {
    let [right, bottom] = [32, 100];
    window.vConsole = new VConsole();
    localStorage.setItem("vConsole_switch_x", right);
    localStorage.setItem("vConsole_switch_y", bottom);
    window.vConsole.setOption({
      onReady: () => {
        $(`#__vconsole .vc-switch`).text("调试工具");
        $(`#__vconsole .vc-switch`).css({
          right: `${right}px`,
          bottom: `${bottom}px`,
          backgroundColor: "#108ee9",
        });
      },
    });
  }

  render() {
    return (
      <div className="App">
        <Router
          basename={
            process.env.NODE_ENV === "production" ? process.env.PUBLIC_URL : "/"
          }
        >
          <Switch>
            {process.env.NODE_ENV === "production" ? null : (
              <Redirect exact from={process.env.PUBLIC_URL} to={"/home"} />
            )}
            <Route exact path="/home" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/qrcode" component={QRCode} />
            <Route exact path="/settings" component={Settings} />
            <Route path={"/"} component={Home} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default withRouter(App);
